import React, { useState, useEffect } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import { Spin } from 'antd'
import { connect, useSelector } from 'react-redux'
import { extractProp } from '../../utils/array'
import NoPermission from './noPermission/NoPermission'
import Home from './home/Home'
import UserList from './userManage/UserList'
import AuditList from './auditManage/AuditList'
import RightList from './rightManage/RightList'
import RoleList from './rightManage/RoleList'
import ServiceList from './serviceManage/ServiceList'
import { getRights } from '../../utils/request/get.js'
import NewService from './serviceManage/NewService'
import DepartmentList from './departmentManage/DepartmentList.js'
import Category from './serviceManage/Category.js'
import Service from './serviceManage/Service.js'
import CategoryService from './serviceManage/Category_Service.js'
import Audit from './systemManage/Audit.js'
import Channel from './systemManage/Channel.js'
import Circulation from './systemManage/Circulation.js'
import Location from './systemManage/Location.js'
import Risk from './systemManage/Risk.js'
import Type from './systemManage/Type.js'

function NewsRouter(props) {
	const token = useSelector(state => state.TokenReducer.token)
	const [routesFromBack, setRoutesFromBack] = useState([])
	const { loading } = props.LoadingReducer
	const rightData = extractProp("key", routesFromBack)
	const routerMap = {
		'/home': <Home />,
		'/user-manage/list': <UserList />,
		'/audit-manage/emergent': <AuditList />,
		'/audit-manage/list': <AuditList />,
		'/role-manage/list': <RoleList />,
		'/right-manage/list': <RightList />,
		'/service-manage/add': <NewService />,
		'/service-manage/list': <ServiceList />,
		'/service-manage/category': <Category />,
		'/service-manage/service': <Service />,
		'/service-manage/category_services': <CategoryService />,
		'/department-manage/list': <DepartmentList />,
		'/system-manage/audit-list': <Audit />,
		'/system-manage/channel-list': <Channel />,
		'/system-manage/circulation-list': <Circulation />,
		'/system-manage/location-list': <Location />,
		'/system-manage/risk-list': <Risk />,
		'/system-manage/type-list': <Type />,
	}
	useEffect(() => {
		async function fetchData() {
			if (token) {
				const res = await getRights(token.roleId)
				setRoutesFromBack(res)
			}
		}
		fetchData()
	}, [token])

	const checkRoute = (item) => {
		// 可以显示 item.pagepermission = 1，否则不显示
		return routerMap[item.key] && item.pagePermission
	}
	const checkUserPermission = (item) => {
		return rightData.includes(item.key)
	}

	return (
		<Spin size='large' spinning={loading}>
			<Routes>
				{
					routesFromBack.map(item => {
						if (checkRoute(item) && checkUserPermission(item)) {
							return <Route path={item.key} key={item.key}
								element={routerMap[item.key]} exact />
						} else {
							return null
						}
					})
				}
				<Route path='/' element={<Navigate to='/home' />} exact />
				{routesFromBack.length > 0 && <Route path='*' element={<NoPermission />} />}
			</Routes>
		</Spin>
	)
}

export default connect(
	state => ({
		LoadingReducer: state.LoadingReducer
	})
)(NewsRouter)